<template lang='pug'>
  section.bg
    van-nav-bar(
      title="积分提现"
      left-arrow
      @click-left="$router.back()"
      )
    header
      .avatar(:style='{backgroundImage: `url(${user && user.user && user.userWx.headImageUrl})`}')
      .credit 总积分：
        span.amount {{points}}
      p.color-l 消费积分可以提取现金，100积分=1元人民币，也可以直接在店铺购买商品等。
    van-cell.bank(icon="location" title="工商银行" is-link to="/bank")
    .withdraw-amount
      div 提现积分
      div.withdraw-credit(@click="keyboardShow = true")
        .total {{withdrawCredit || '请输入提取积分'}}
        |积分
    footer: van-button(size="large" type="primary" @click="$router.push('/withdrawProgress')") 提现

    van-number-keyboard(
      :show="keyboardShow"
      extra-key="."
      close-button-text="完成"
      @blur="keyboardShow = false"
      @input="setCredit"
      @delete="deleteCredit"
      )
</template>

<script type='text/ecmascript-6'>
  export default {
    components: {
    },
    data() {
      return {
        keyboardShow: false,
        withdrawCredit: ''

      }
    },
    computed: {
      user() {
        return this.$store.state.authUser || {}
      },
      points() {
        if (!this.user || !this.user.user) return 0
        return this.user.user.points
      },
    },
    methods: {
      setCredit(val) {
        if (val !== '.') {
          this.withdrawCredit += val
          console.log(this.withdrawCredit)
        }
      },
      deleteCredit() {
        console.log(111111111)
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'

section
  min-height 100vh
header
  padding 2rem 1rem
  text-align center
  line-height 1.3
  background-color $color-white
  p
    text-align left
.bank
  margin 1rem 0
.withdraw-amount
  padding 2rem 1.5rem
  line-height 2
  background-color $color-white
  .withdraw-credit
    display flex
    align-items flex-end
    .total 
      flex 1
      font-size $fsz-large
footer
  margin 2rem 3rem 0
</style>
